<template>
  <div class="article-detail">
    <nav-bar text="文章详情"></nav-bar>
    <div class="content">
      <better-scroll>
        <banner url="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></banner>
        <article class="article-content">
          <h2 class="title">用自己喜欢的多肉打造出不同的造型，注入了情感的多肉盆栽变得意义非凡</h2>
          <div class="author-info-block">
            <div class="author-name">作者：浅月于静</div>
            <div class="view-count">
              <svg-icon name="view" color="#999"></svg-icon>
              <span>2222</span>
            </div>
          </div>
          <section v-html="article"></section>
        </article>
      </better-scroll>
    </div>
    <div class="action-bar">
      <div class="share-action action">
        <svg-icon name="share" color="#fff"></svg-icon>
        <span>分享</span>
      </div>
      <div class="praise-action action">
        <svg-icon name="praise" color="#fff"></svg-icon>
        <span>点赞</span>
      </div>
      <div class="collect-action action">
        <svg-icon name="collect" color="#fff"></svg-icon>
        <span>立即收藏</span>
      </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from '@/components/BetterScroll.vue'
import Banner from '@/components/Banner.vue'
import NavBar from '@/components/NavBar.vue'

export default {
  data () {
    return {
      article: `用自己喜欢的多肉打造出不同风格的造型，看着它们错落有致，充满艺术感，放在庭院、窗边或者送一盆给重要的人，注入了情感的多肉植物盆栽也会变得意义非凡。<br>
                而制作的过程中，植株的选择，色彩的搭配都是需要掌握的一门技巧。掌握了色彩的搭配，能够最大限度的发挥多肉植物的叶色个性。<br>
                多肉植物的颜色丰富多彩，多种颜色搭配会给人营造一种热烈时尚的氛围，但是色彩搭配过度，就会显得杂乱无章。<br>
                1、多色对比盆栽。将深色多肉作为主角，比如红色，栽种在中间，会很醒目。用与红色相反的绿色作为辅色，黄色作为过渡色，银色作为点缀色，把不同色彩的植物比邻栽种，起到相互映衬的作用。<br>
                2、辅色对比盆栽。红色和绿色、紫色和黄色、蓝色和橙色，运用辅色这种反差性的搭配，会给人眼前一亮的感觉。<br>
                3、同色系色彩渐变盆栽<br>
                形态相似的多肉，从粉色到红色，这样的渐变色系搭配，如果栽种成一个球形，前后左右看起来都特别漂亮，也不显得单调。<br>
                想要打造球形盆栽，尽量选择高度一致的多肉，花盆中间的土略高与两侧，外侧的多肉稍微倾斜栽种，就会感觉很立体。`
    }
  },

  components: {
    BetterScroll,
    Banner,
    NavBar
  }
}
</script>

<style scoped>
.article-detail {
  height: 100%;
  background-color: #fff;
}
.content {
  height: calc(100% - 192px);
}
.article-content {
  padding: 20px 14px;
}
.title {
  font-size: 36px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 30px;
}
.author-info-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  color: #999;
  padding-bottom: 16px;
  border-bottom: 1px solid #999999;
  margin-bottom: 20px;
}
.view-count {
  display: flex;
  align-items: center;
}
.view-count > span {
  margin-left: 10px;
}
section {
  font-size: 24px;
  line-height: 36px;
  color: #666;
}
.action-bar {
  width: 100%;
  height: 96px;
  display: grid;
  grid-template-columns: 198px 198px auto;
  grid-column-gap: 1px;
}
.action-bar > .action {
  background-color: #67B85F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-action, .praise-action {
  opacity: 0.7;
}
.action > span {
  font-size: 30px;
  color: #fff;
  margin-left: 20px;
}
.collect-action > span {
  font-size: 36px;
}
</style>
